import React from 'react';
import Topic from './components/Topic'
import { connect } from 'react-redux'
import List from './components/List'
import Recommer from './components/Recommer'
import Writer from './components/Writer'
import Carouselc from './components/Carousel'
import {actionCreators} from './store'
import { HomeWrapper,
         HomeLeft,
         HomeRight,
         GoTop } from './style'
class Home extends React.PureComponent{
    handleScrollTop(){
        window.scrollTo(0,0)
    }
    render(){
        return(
                <HomeWrapper>
                    <HomeLeft>
                        < Carouselc></ Carouselc>
                        <Topic></Topic>
                        <List></List>
                    </HomeLeft>
                    <HomeRight>
                        <Recommer></Recommer>
                        <Writer></Writer>
                    </HomeRight>
                    {/* 是否显示 */}
                          {this.props.showScroll?<GoTop onClick={this.handleScrollTop}>返回顶部</GoTop>:null}
                </HomeWrapper>
            
        )
    }
    componentDidMount(){
        this.props.changeHomeData()
        this.bindevents()
    }

    componentWillUnmount(){
        window.removeEventListener('scroll',this.props.changeScrollTopShow)
    }
    bindevents(){
        window.addEventListener('scroll',this.props.changeScrollTopShow)
    }
}

const mapState=(state)=>({
    showScroll:state.getIn(['home','showScroll'])
})


const mapDispatch = (dispatch)=>({
    changeHomeData(){
        const action = actionCreators.getHomeData()
        dispatch(action)
    },
    changeScrollTopShow(){
        if(document.documentElement.scrollTop > 300){
            dispatch(actionCreators.toggleTopShow(true))
        }else{
            dispatch(actionCreators.toggleTopShow(false))
        }   
    }
})

export default connect(mapState,mapDispatch)(Home)